<template>
	<div>
		<h2>{{ book.bookName }}</h2>
		<h5>{{ book.bookIntroduction }}</h5>
		<div>
			<el-image 
				style="width: 200px; height: 200px"
				lazy
    			v-if="book.bookPicture"
				:src="book.bookPicture"
				:preview-src-list="[book.bookPicture]"
				>
			</el-image>
		</div>
		<el-form :inline="true">
			<h5>说点什么吧......</h5>
   			<hr />
			<el-form :model="editForm" :rules="editFormRules" ref="editForm">
				<el-form-item prop="comment" > 
					<el-input 
						style="width:1000px"
						type="textarea"
						:autosize="{ minRows: 4, maxRows: 8}"
						placeholder="请输入留言内容"
						v-model="editForm.comment" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			
			<el-button type="primary" @click="submitForm('editForm')" v-if="hasAuth('sys:bookComment:save')" style="float: right;">提 交</el-button>
			<br>
			<br>
		</el-form>

		<hr />

		<el-timeline :reverse=true>
			<el-timeline-item v-bind:timestamp="ms.created" placement="top" v-for="ms in tableData" :key="ms" >
			<el-card>
				<h4>留言人: {{ms.username}}</h4>
				<p>{{ms.comment}}</p>
			</el-card>
			</el-timeline-item>
		</el-timeline>

		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
				:page-sizes="[10, 20, 50, 100]"
				:current-page="current"
				:page-size="size"
				:total="total">
		</el-pagination>
	</div>
</template>

<script>
	var padDate = function (value) {
		return value <10 ? '0' + value:value;
	};
	export default {
		name: "BookComment",
		data() {
			return {
				searchForm: {},
				delBtlStatu: true,

				total: 0,
				size: 10,
				current: 1,

				dialogVisible: false,
				editForm: {
					userId: '',
					bookId: '',
					comment: ''
				},

				tableData: [],

				editFormRules: {
					comment: [
						{required: true, comment: '请输入留言', trigger: 'blur'}
					],
				},

				multipleSelection: [],

				roleDialogFormVisible: false,
				defaultProps: {
					children: 'children',
					label: 'name'
				},
				bookCommentData:  [],
				treeCheckedKeys: [],
				checkStrictly: true,
				userInfo: {
					id: "",
					username: "",
					avatar: ""
				},
				book: {

				},
				bookId : '',

			}
		},
		created() {
			this.getUserInfo()
			this.bookId = this.$route.params.id
			if(this.bookId == null){
				this.$router.push({name:'sys:book:list'})
				return false;
			}
			this.editForm.bookId = this.bookId
			this.$axios.get("/sys/bookComment/list").then(res => {
				this.bookCommentData = res.data.data.records
			})
			this.$axios.get('/sys/book/info/' + this.bookId).then((res) => {
				this.book = res.data.data
			});
			this.getBookCommentList()
		},
		methods: {
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				console.log("勾选")
				console.log(val)
				this.multipleSelection = val;

				this.delBtlStatu = val.length == 0
			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.size = val
				this.getBookCommentList()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.current = val
				this.getBookCommentList()
			},

			getBookCommentList() {
				this.$axios.get("/sys/bookComment/findBookCommentList", {
					params: {
						bookId: this.bookId,
						current: this.current,
						size: this.size
					}
				}).then(res => {
					this.tableData = res.data.data.records
					this.size = res.data.data.size
					this.current = res.data.data.current
					this.total = res.data.data.total
				})
			},

			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios.post('/sys/bookComment/' + (this.editForm.id?'update' : 'save'), this.editForm)
							.then(res => {
								this.$message({
									showClose: true,
									message: '恭喜你，留言成功',
									type: 'success',
									onClose:() => {
										this.getBookCommentList()
										this.editForm.comment = ''
									}
								});
							})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			
			// 时间格式方法
			formatDateTime(row, column) {
				// 获取单元格数据
				let data = row[column.property]
				if(data == null) {
					return null
				}
				let dt = new Date(data)
				return dt.getFullYear() + '-' + padDate(dt.getMonth() + 1) + '-' + padDate(dt.getDate()) + ' ' + padDate(dt.getHours()) + ':' + padDate(dt.getMinutes()) + ':' + padDate(dt.getSeconds())
			},
			// 日期格式方法
			formatDate(row, column) {
				// 获取单元格数据
				let data = row[column.property]
				if(data == null) {
					return null
				}
				let dt = new Date(data)
				return dt.getFullYear() + '-' + padDate(dt.getMonth() + 1) + '-' + padDate(dt.getDate())
			},
			getUserInfo() {
				this.$axios.get("/sys/userInfo").then(res => {
					this.userInfo = res.data.data
					this.editForm.userId = this.userInfo.id
				})
			},

		}
	}
</script>

<style scoped>

	.el-pagination {
		float: right;
		margin-top: 22px;
	}

</style>